<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemUDForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" :class="dialogFormType==='view'?'formTable':''" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):''">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col :span="24">
          <el-form-item label="模块名称：" prop="modelName">
            <el-input v-model.trim="dialogForm.modelName" show-word-limit maxlength="60" placeholder="请输入模块名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="模块编码：" prop="modelCode">
            <el-input v-model.trim="dialogForm.modelCode" show-word-limit maxlength="100" placeholder="请输入模块编码"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="前端端口：" prop="ipAddress">
            <el-input v-model.trim="dialogForm.ipAddress" show-word-limit maxlength="100" placeholder="请输入前端端口"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="后台端口：" prop="apiPort">
            <el-input v-model.trim="dialogForm.apiPort" show-word-limit maxlength="100" placeholder="请输入后台端口"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="路径：" prop="rootPath">
            <el-input v-model.trim="dialogForm.rootPath" show-word-limit maxlength="240" placeholder="请输入路径"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="模块背景颜色：" prop="modelBackgroundColor">
            <!-- <el-color-picker v-model="dialogForm.modelBackgroundColor"></el-color-picker> -->
            <el-input v-model.trim="dialogForm.modelBackgroundColor" show-word-limit maxlength="240" placeholder="请输入模块背景颜色"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="是否是子系统：" prop="isSubSystem">
            <el-radio-group v-model.trim="dialogForm.isSubSystem">
              <el-radio
                v-for="dict in yesNoOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="是否首页展示：" prop="visible">
            <el-radio-group v-model.trim="dialogForm.visible">
              <el-radio
                v-for="dict in yesNoOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        </el-col><el-col :span="24">
          <el-form-item label="是否是白名单：" prop="isWhitelist">
            <el-radio-group v-model.trim="dialogForm.isWhitelist">
              <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">
                {{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24">-->
        <!--          <el-form-item v-if="dialogForm.isSubSystem === 'Y'" label="是否包含流程引擎：" prop="isHaveProcess">-->
        <!--            <el-radio-group v-model.trim="dialogForm.isHaveProcess">-->
        <!--              <el-radio v-for="dict in yesNoOptions" :key="dict.dictValue" :label="dict.dictValue">-->
        <!--                {{ dict.dictLabel }}-->
        <!--              </el-radio>-->
        <!--            </el-radio-group>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->

        <el-col :span="24">
          <el-form-item label="是否启用：" prop="enableStatus">
            <el-radio-group v-model.trim="dialogForm.enableStatus">
              <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">
                {{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="图标：" prop="iconIds">
            <uploadFile
              ref="uploadFile" uploaderName="icon"
              uploadType="image" :uploadBtn="dialogFormType !== 'view'"
              btnTitle="上传图标" btnType="primary"
              :isAccept="true" :acceptArr="['.jpg','.png','.jpeg']"
              :multiple="false" :limit="1" :showList="true"
              :deleteBool="dialogFormType !== 'view'"
              :successList="dialogForm.iconList"
              @deleteFileList="(data,deleteAnnexIdsBool)=>deleteFileTablelistMixins(data,deleteAnnexIdsBool,false,'form','','','icon')"
              @getFileList="(data)=>getFileTableListMixins(data,false,'form','','','icon',false, 'image')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序：" prop="sort">
            <el-input-number v-model.trim="dialogForm.sort" placeholder="请输入排序" :controls="false"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// ---------------------------------------------------------------------------------------
export default {
  name: 'DictDialog',
  mixins: [dialogFormMixins],
  components: {},
  data() {
    return {
      // 表单参数
      dialogForm: {
        enableStatus: '0',
        isSubSystem: 'Y',
        visible: 'N',
        // isHaveProcess: 'N',
        modelBackgroundColor: '#409EFF',
        iconIds: [],
        iconList: [],
        deleteAnnexIds: []
      },
      dialogRules: {
        modelName: [{ required: true, message: '模块名称不能为空', trigger: 'blur' }],
        modelCode: [{ required: true, message: '模块编码不能为空', trigger: 'blur' }],
        ipAddress: [{ required: true, message: '模块前端端口不能为空', trigger: 'blur' }],
        isSubSystem: [{ required: true, message: '请选择是否是子系统', trigger: 'blur' }],
        visible: [{ required: true, message: '请选择', trigger: 'blur' }],
        rootPath: [{ required: true, message: '模块路径不能为空', trigger: 'blur' }],
        iconIds: [{ required: false, message: '请选择模块图标', trigger: 'blur' }],
        sort: [{ required: true, message: '模块排序不能为空', trigger: 'blur' }]
      },
      statusOptions: []
    }
  },
  created() {
    this.getDictMixins('statusOptions', 'sys_normal_disable')
    this.getDictMixins('yesNoOptions', 'sys_yes_no')
  },
  mounted() {

  },
  methods: {

    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        enableStatus: '0',
        isSubSystem: 'Y',
        visible: 'N',
        // isHaveProcess: 'N',
        modelBackgroundColor: '#409EFF',
        iconIds: [],
        iconList: [],
        deleteAnnexIds: []
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null
          if (this.dialogForm.id !== undefined) {
            url = '/models/update'
            type = '修改'
          } else {
            url = '/models/save'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      this.dialogGetDetailMixins('/models/get', { id: row.id })
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} res
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      this.handelFileTablelistMixin(data, 'icon')
      this.dialogForm = data
      this.dialogFormLoading = false
    }
  }
}
</script>
